import React, { useEffect, useState, useRef } from 'react';
import { mockData } from '../utils/mockData';

const StaffRanking = () => {
  const [activeType, setActiveType] = useState('voice');
  const [voiceData, setVoiceData] = useState([]);
  const [textData, setTextData] = useState([]);
  const switchIntervalRef = useRef(null);

  useEffect(() => {
    setVoiceData(mockData.voiceRanking);
    setTextData(mockData.textRanking);
    setupRankingSwitch();

    return () => {
      if (switchIntervalRef.current) {
        clearInterval(switchIntervalRef.current);
      }
    };
  }, []);

  const setupRankingSwitch = () => {
    // 设置切换定时器
    switchIntervalRef.current = setInterval(() => {
      setActiveType(prev => prev === 'voice' ? 'text' : 'voice');
    }, 5000);
  };

  const handleIndicatorClick = (type) => {
    if (switchIntervalRef.current) {
      clearInterval(switchIntervalRef.current);
    }
    setActiveType(type);
    setupRankingSwitch();
  };

  const renderRankingTable = (data) => {
    if (data.length === 0) {
      return (
        <tr>
          <td colSpan="3" className="no-data">暂无数据</td>
        </tr>
      );
    }

    // 对数据排序（高→低）
    const sortedData = [...data].sort((a, b) => b.count - a.count);

    return sortedData.map((staff, index) => {
      let medalClass = "";
      let medalHTML = "";

      if (index < 3) {
        medalClass = `medal-${index + 1}`;
        medalHTML = <span className={`medal-icon ${medalClass}`}>{index + 1}</span>;
      }

      return (
        <tr key={index} style={index < 3 ? { background: 'rgba(36, 187, 236, 0.08)' } : {}}>
          <td>{medalHTML} {index + 1}</td>
          <td>{staff.id}</td>
          <td>{staff.count}</td>
        </tr>
      );
    });
  };

  // 处理语音数据格式
  const processVoiceData = () => {
    return voiceData.map(item => ({
      id: item.id6d,
      count: parseInt(item.worker_call_reception_count)
    }));
  };

  // 处理文字数据格式
  const processTextData = () => {
    return textData.map(item => ({
      id: item.id6d,
      count: parseInt(item.worker_text_reception_count)
    }));
  };

  return (
    <div className="staff-ranking-container">
      <div className="ranking-header">
        <div className="ranking-indicators">
          <div 
            className={`indicator ${activeType === 'voice' ? 'active' : ''}`} 
            onClick={() => handleIndicatorClick('voice')}
            data-type="voice"
          ></div>
          <div 
            className={`indicator ${activeType === 'text' ? 'active' : ''}`} 
            onClick={() => handleIndicatorClick('text')}
            data-type="text"
          ></div>
        </div>
      </div>
      
      <div className="ranking-type">
        {activeType === 'voice' ? '语音接待排行' : '文字接待排行'}
      </div>
      
      <div className={`ranking-content voice-ranking ${activeType === 'voice' ? 'active' : ''}`}>
        <table>
          <thead>
            <tr>
              <th>排名</th>
              <th>客服ID</th>
              <th>接待量</th>
            </tr>
          </thead>
          <tbody>
            {renderRankingTable(processVoiceData())}
          </tbody>
        </table>
      </div>
      
      <div className={`ranking-content text-ranking ${activeType === 'text' ? 'active' : ''}`}>
        <table>
          <thead>
            <tr>
              <th>排名</th>
              <th>客服ID</th>
              <th>接待量</th>
            </tr>
          </thead>
          <tbody>
            {renderRankingTable(processTextData())}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default StaffRanking;
